<template>
  <header>
    <el-menu
      :default-active="$router.currentRoute.value.path"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="/admin/home">
        <el-image style="width: 6vw; height: 5vh" :src="baseUrl + '/api/imgs/article/logo.png'"/>
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="/admin/home">全站数据</el-menu-item>
      <el-menu-item :disabled="$store.state.role !== 'SUPER'" index="/admin/allUser">用户管理</el-menu-item>
      <el-menu-item index="/admin/allArticle">文章管理</el-menu-item>
      <el-menu-item index="/admin/allNotice">公告管理</el-menu-item>
      <el-menu-item index="/admin/board">留言板管理</el-menu-item>
      <el-col id="formSearch" :span="4" >
      </el-col>
      <el-sub-menu id="menu4" index="4">
        <template #title>
          <el-avatar :size="50" :src="baseUrl + $store.state.avatar + '?r=' + Math.random()*1000" /> 
        </template>
        <el-menu-item index="/home">返回首页</el-menu-item>
        <el-menu-item index="/logout">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </header>
</template>

<script>
// import {mapState} from 'vuex'
import api from '../../api/data.js'
// import { ArrowRightBold, Search } from '@element-plus/icons-vue'
export default {
  name: 'BlogHeader',
  components: {
  },
  data () {
    return {
      baseUrl: api.baseUrl,
      form: {
        search: ''
      }
    }
  },
  methods: {
    handleSelect (key) {
      if (key === '/logout') {
        this.$store.commit('logout')
      }
      this.$router.push({path: key})
    },
    handleSearch (key) {
      this.$router.push({path: '/blogs', query: {search: key}})
    },
  },
  computed: {
  }
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
#formSearch {
  margin-top: 8px;
  /* margin-left: 30px; */
  /* margin-right: 30px; */
}
#formSearch .el-input {
  margin-top: 4px;
}
#menu3 {
  margin-right: 14vw;
}
#menu4 {
  margin-left: 16vw;
}
</style>
